<!DOCTYPE html>  
<html lang="en" dir="ltr">  
<head>  
    <meta charset="utf-8">  
    <title>健康数据可视化 - 历史记录</title>  
    <link rel="shortcut icon" href="{{ url_for('static', filename='diabetes-favicon.ico') }}">  
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">  
    <script src="https://kit.fontawesome.com/5f3f547070.js" crossorigin="anonymous"></script>  
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">  
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>  
    <script src="{{ url_for('static', filename='script.js') }}" defer></script> <!-- 引入外部 JS 文件 -->  
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>  

<body>  
    <!-- 网站导航栏 -->  
    <div class="container">  
        <h2 class='container-heading'><span class="heading_font">个人健康数据可视化 - 历史记录</span></h2>  
        <div class='description'>  
            <p>查看您过去的健康数据记录。</p>  
        </div>  
    </div>  

    <!-- patient ID 查询 -->  
    <div class="patient-id-query-container">  
        <input type="text" id="patient-id" placeholder="输入患者ID" />  
        <button id="query-button" class="my-cta-button" onclick="fetchPatientRecords()">查询患者记录</button>  
    </div>  

    <!-- 日期选择器 -->  
    <div class="date-picker-container">  
        <input type="date" id="date-picker" />  
        <button id="date-submit" class="my-cta-button" onclick="fetchRecords()">查看该日期的记录</button>  
        <button id="view-all" class="my-cta-button" onclick="fetchAllRecords()">查看所有记录</button>  
    </div>  

    <!-- 历史记录数据表格 -->  
    <div class="ml-container">  
        <h2>历史输入记录</h2>  
        <table id="history-table">  
            <thead>  
                <tr>  
                    <th>患者ID</th>  
                    <th>时间</th>  
                    <th>怀孕次数</th>  
                    <th>血糖</th>  
                    <th>血压</th>  
                    <th>皮肤厚度</th>  
                    <th>胰岛素</th>  
                    <th>BMI</th>  
                    <th>糖尿病谱系功能</th>  
                    <th>年龄</th>  
                    <th>预测结果</th>  
                </tr>  
            </thead>  
            <tbody>   
            </tbody>  
        </table>  
    </div>  

    <!-- 页码控制 -->  
    <div class="pagination">  
        <button id="prev-page" class="pagination-button" onclick="changePage(-1)">上一页</button>  
        <span id="current-page">第 1 页</span>  
        <button id="next-page" class="pagination-button" onclick="changePage(1)">下一页</button>  
    </div>  

    <!--健康分析模块-折线图 -->  
    <div class="ml-container">  
        <h2>健康体征分析</h2>  
        <div class="checkbox-container">  
            <label><input type="checkbox" id="show-pregnancies" checked onclick="updateChart()"> 怀孕次数</label>  
            <label><input type="checkbox" id="show-blood-sugar" checked onclick="updateChart()"> 血糖</label>  
            <label><input type="checkbox" id="show-blood-pressure" checked onclick="updateChart()"> 血压</label>  
            <label><input type="checkbox" id="show-skin-thickness" checked onclick="updateChart()"> 皮肤厚度</label>  
            <label><input type="checkbox" id="show-insulin" checked onclick="updateChart()"> 胰岛素</label>  
            <label><input type="checkbox" id="show-bmi" checked onclick="updateChart()"> BMI</label>  
            <label><input type="checkbox" id="show-age" checked onclick="updateChart()"> 年龄</label>  
            <label><input type="checkbox" id="show-diagnosis" checked onclick="updateChart()"> 糖尿病谱系功能</label>  
        </div>  
        <canvas id="healthChart" width="400" height="200"></canvas>  
    </div>  
    
    <!-- 总体数据可视化 -->  
    <div class="chart-container">  
        <div>  
            <canvas id="diabetesChart" class="chart"></canvas> <!-- 饼图 -->  
        </div>  
        <div>  
            <canvas id="radarChart" class="chart"></canvas> <!-- 雷达图 -->  
        </div>  
    </div>
    <div class="boxplot-container">  
        <div id="non-diabetic-boxplot" class="boxplot-chart"></div>  
        <div id="diabetic-boxplot" class="boxplot-chart"></div>  
    </div>

    <!-- Footer -->  
    <div class='footer'>  
        <div class="contact">  
            <a target="_blank" href="https://github.com/anujvyas/Diabetes-Prediction-Deployment"><i class="fab fa-github fa-lg contact-icon"></i></a>  
            <a target="_blank" href="https://www.linkedin.com/in/anujkvyas"><i class="fab fa-linkedin fa-lg contact-icon"></i></a>  
        </div>  
        <p class='footer-description'>联系我们 ❤️ 3188577474@qq.com </p>  
    </div>  
</body>  
</html>  